<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="JavaScript/animate.js"></script>
    <script>
        window.addEventListener('load', function() {
            // 1.过去元素
            var cloud = document.querySelector('.cloud');
            var c_nav = document.querySelector('.c-nav');
            var lis = document.querySelectorAll('li');
            var current = 0;
            // 2.给所有小li绑定事件
            for (var i = 0; i < lis.length; i++) {
                lis[i].addEventListener('mouseenter', function() {
                    animate(cloud, this.offsetLeft);
                });
                lis[i].addEventListener('mouseleave', function() {
                    animate(cloud, current);
                });
                lis[i].addEventListener('click', function() {
                    current = this.offsetLeft;
                });
            }
        });
    </script>
</head>
<style>
    * {
        margin: 0;
        padding: 0
    }
    
    ul {
        list-style: none;
    }
    
    body {
        background-color: black;
    }
    
    .c-nav {
        width: 900px;
        height: 42px;
        background: #fff url(images/rss.png) no-repeat right center;
        margin: 100px auto;
        border-radius: 5px;
        position: relative;
    }
    
    .c-nav ul {
        position: absolute;
    }
    
    .c-nav li {
        float: left;
        width: 83px;
        text-align: center;
        line-height: 42px;
    }
    
    .c-nav li a {
        color: #333;
        text-decoration: none;
        display: inline-block;
        height: 42px;
    }
    
    .c-nav li a:hover {
        color: white;
    }
    
    .cloud {
        position: absolute;
        left: 0;
        top: 0;
        width: 83px;
        height: 42px;
        background: url(images/cloud.gif) no-repeat;
    }
</style>

<body>
    <div id="c_nav" class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li><a href="#">首页新闻</a></li>
            <li><a href="#">师资力量</a></li>
            <li><a href="#">活动策划</a></li>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">招聘信息</a></li>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">我是佩奇</a></li>
            <li><a href="#">啥是佩奇</a></li>
        </ul>
    </div>
</body>

</html>